<template>
  <div class="training">
    <div class="t-header">
      <div class="t-h-row">
        <div class="t-h-title"> <i class="iconfont icon-shijuan-xianxing"></i>训练列表</div>
        <OjSearch class="search-input" placeholder="搜索训练" size="small" @search="(v) => searchData(v)"></OjSearch>
      </div>
    </div>
    <div class="t-selection">
      <div class="t-s-title">训练权限:
        <n-button-group class="btnGroup">
          <n-button class="nbtn" size="tiny" strong secondary round v-for="item in trainingAuth" :key="item.value"
            :type="searchParams.auth === item.value ? item.type : 'tertiary'"
            @click="() => { searchParams.auth = item.value }">{{
              item.label }}</n-button>
        </n-button-group>
      </div>
      <div class="t-s-title">训练分类:
        <n-tag class="item" v-for="item in trainingCategoryList" :key="item.id" size="small" round
          :style="{ 'backgroundColor': (item.id == searchParams.categoryId ? item.color : ''), 'color': (item.id == searchParams.categoryId ? '#fff' : item.color) }"
          @click="changeSelectCategory(item.id)" :color="{ borderColor: item.color, textColor: item.color }">{{
            item.name
          }}</n-tag>
      </div>
    </div>
    <div class="t-body">
      <el-table class="table no-background" :data="trainingList.records" size="small" stripe @row-dblclick="handlerToTrainingDetail">
        <el-table-column type="index" label="序号" width="100%" align="center" :index="indexMethod" />
        <el-table-column prop="id" label="编号" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="center"></el-table-column>
        <el-table-column prop="auth" label="训练类别" align="center">
          <template #default="scoped">
            <n-tag type="warning" v-show="scoped.row.auth == 2" round size="small" :bordered="false">保护训练</n-tag>
            <n-tag type="error" v-show="scoped.row.auth == 1" round size="small" :bordered="false">私有训练</n-tag>
            <n-tag type="success" v-show="scoped.row.auth == 0" round size="small" :bordered="false">公开训练</n-tag>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="分类" align="center">
          <template #default="scoped">
            <n-tag class="item" size="small" round
              :color="{ borderColor: scoped.row.categoryColor, textColor: scoped.row.categoryColor }">
              {{ scoped.row.categoryName }}
            </n-tag>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="进度" align="center">
          <template #default="scoped">
            <n-progress :percentage="getPercent(scoped.row.problemCount, scoped.row.acCount)"
              :indicator-placement="'inside'" indicator-text-color="#fff"
              :color="scoped.row.categoryColor"></n-progress>
          </template>
        </el-table-column>
        <el-table-column prop="problemCount" label="题目数量" align="center"></el-table-column>
        <el-table-column prop="author" label="作者" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="最近更新" align="center">
          <template #default="scoped">
            {{ getDay(scoped.row.updateTime) || "--" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="t-footer">
      <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small layout="prev, pager, next,sizes"
        :total="Number(trainingList.total)" v-model:current-page="searchParams.pageNum"
        v-model:page-size="searchParams.pageSize" />
    </div>
  </div>
</template>

<script>
import { getTrainingListAPI, getTraingCategoryAPI } from "@/api/ojAPI/ojAPI"
import { ElMessage } from 'element-plus'
import OjSearch from '@/components/common/ojSearch.vue'
// config 
import { trainingAuth } from './config'
export default {
  data () {
    return {
      searchParams: {
        pageNum: 1,
        pageSize: 20,
        title: '',
        categoryId: '',
        auth: ''
      },
      trainingList: {
        total: 20,
        records: []
      },
      trainingCategoryList: [],
      trainingAuth: trainingAuth
    }
  },
  mounted () {
    this.getTraingCategory()
    this.getTrainingList()
  },
  methods: {
    //改变训练是否私有
    changeAuth (value) {
      this.searchParams.auth = value
    },
    //获取训练分类列表
    async getTraingCategory () {
      await getTraingCategoryAPI().then(res => {
        if (res.data.code === 200) {
          this.trainingCategoryList = res.data.data
        }
      }).catch(err => {
        ElMessage.error("系统错误")
      })
    },
    //获取训练列表
    async getTrainingList () {
      await getTrainingListAPI(this.searchParams).then(res => {
        if (res.data.code === 200) {
          this.trainingList = res.data.data
        }
      }).catch(err => {
        ElMessage.error("系统错误")
      })
    },
    //改变当前选择分类
    changeSelectCategory (id) {
      if (id == this.searchParams.categoryId) {
        this.searchParams.categoryId = ''
        return
      }
      this.searchParams.categoryId = id
    },
    //时间格式化
    getDay (time) {
      const now = Date.now()
      var timer = Date.parse(time)
      const day = Math.round((now - timer) / 1000 / 60 / 60 / 24)
      if (day < 1) {
        return "昨天"
      }
      return day + "天前"
    },
    //获取百分比
    getPercent (problemCount, acCount) {
      if (problemCount == 0) {
        return 0
      }
      return Number((acCount * 100 / problemCount).toFixed(2))
    },
    //路由跳转
    handlerToTrainingDetail (row) {
      this.$router.push({
        path: `/home/training-detail/${row.id}`
      })
    },
    //搜索
    searchData (v) {
      this.searchParams.title = v
    },
    indexMethod (index) {
      return (this.searchParams.pageNum - 1) * this.searchParams.pageSize + index + 1
    }
  },
  watch: {
    searchParams: {
      deep: true,
      handler () {
        this.getTrainingList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.training {
  width: 95%;
  height: 85vh;
  padding-top: 10px;
  margin: 0 auto;
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .t-header {
    width: 100%;
    max-height: 100px;

    .t-h-row {
      display: flex;

      .search-input {
        height: 30px;
        line-height: 30px;
        width: 20%;
        margin: auto 30px;
      }

      .t-h-title {
        height: 30px;
        line-height: 30px;
        font-size: 22px;
        font-weight: 600;
        color: #555;
        display: flex;
        text-align: center;

        .iconfont {
          margin: auto 0;
          font-weight: normal;
          font-size: 24px;
        }
      }
    }

  }

  .t-selection {
    padding: 0 15px 10px 15px;
    border-bottom: 2px solid @lineColor;

    .t-s-title {
      margin: 8px auto;

      .item {
        margin: auto 10px auto 0;
      }
    }
  }

  .t-body {
    padding: 10px;

    .table {
      height: 62vh;
    }
  }

  .t-footer {
    margin: auto 0 0 0;
    display: flex;
    justify-content: center;
  }
}
</style>